<template>
  <div class="BreadPart" v-show="history.length>1">
    <Tag
      v-for="(item, index) in history"
      :key="index"
      @on-close="$router.go(-1)"
      type="border"
      :color="item.color"
      :closable="index!=0 && index==history.length-1"
    >{{item.meta.title}}</Tag>
  </div>
</template>

<script>
export default {
  name: "BreadPart",
  data() {
    return {
      history: []
    };
  },
  methods: {
    router(to, from, next) {
        const COLOR = ["primary", "success", "warning"];
        let history = to.matched;
        this.history.splice(0,history.length);
        for (let index = 0; index < history.length; index++) {
          const item = history[index];
          if (item.meta.title) {
            this.history.push({ meta: item.meta, color: COLOR[index] });
          }
        }
        if (next) next();
    }
  },
  created() {
    this.router(this.$route);
    this.$router.beforeEach(this.router);
  }
};
</script>

<style lang="less" scoped>
.BreadPart {
  border-bottom: 1px solid #ddd;
  padding: 5px 0;
  margin-bottom: 3px;
}
</style>